<template>
  <div>
    <label v-for="(opt, i) in node.options" :class="['option', node.parent[node.name]===opt.value ? 'sel' : '']"
           :tag="opt.value" :key="i" @click="selValue(opt.value)">{{opt.text}}</label>
  </div>
</template>

<script>

export default {
  name: 'UIOption',
  props: ['node'],
  data () {
    return {
      value: this.node.parent[this.node.name]
    }
  },
  methods: {
    selValue: function (value) {
      this.$emit('childChange', value);
    }
  }
}

</script>

<style scoped>
  .option { border: 1px solid #ddd; min-width:40px; text-align: center; font-size: 14px;
    line-height: 28px; cursor: pointer; margin-bottom: 0px; margin-top: 2px;
  }
  .sel { border-color:#007bff!important; color:#007bff!important }
</style>
